.container {
  position: relative;
}

.container:before {
  position: absolute;
  display: block;
  content: '';
  background-color: var(--primary-accent);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: sizePulse 5400ms forwards;
}

@keyframes sizePulse {
  /* 0/7 */
  0% {
    width: 0;
    height: 0;
  }

  /* 1/7 */
  14% {
    width: 10px;
    height: 10px;
    animation-timing-function: ease-out;
  }

  /* 2/7 */
  28% {
    width: 10px;
    height: 10px;
  }

  /* 3/7 */
  43% {
    width: 3px;
    height: 3px;
    animation-timing-function: ease-out;
  }

  /* 4/7 */
  57% {
    width: 3px;
    height: 3px;
  }

  /* 5/7 */
  71% {
    width: 10px;
    height: 10px;
    animation-timing-function: ease-out;
  }

  /* 6/7 */
  86% {
    width: 10px;
    height: 10px;
    opacity: 1;
  }

  /* 7/7 */
  100% {
    width: 0px;
    height: 0px;
    opacity: 0;
    animation-timing-function: ease-out;
  }
}

@keyframes sizePulse {
  /* 0/15 */
  0% {
    width: 0;
    height: 0;
  }

  /* 1/15 */
  6.7% {
    width: 10px;
    height: 10px;
    animation-timing-function: ease-out;
  }

  /* 2/15 */
  13.3% {
    width: 10px;
    height: 10px;
  }

  /* 3/15 */
  20% {
    width: 3px;
    height: 3px;
    animation-timing-function: ease-out;
  }

  /* 4/15 */
  26.7% {
    width: 3px;
    height: 3px;
  }

  /* 5/15 */
  33.3% {
    width: 10px;
    height: 10px;
    animation-timing-function: ease-out;
  }

  /* 6/15 */
  40% {
    width: 10px;
    height: 10px;
  }

  /* 7/15 */
  46.6% {
    width: 3px;
    height: 3px;
    animation-timing-function: ease-out;
  }

  /* 8/15 */
  53.3% {
    width: 3px;
    height: 3px;
  }

  /* 9/15 */
  60% {
    width: 10px;
    height: 10px;
    animation-timing-function: ease-out;
  }

  /* 10/15 */
  66.6% {
    width: 10px;
    height: 10px;
  }

  /* 11/15 */
  73.3% {
    width: 3px;
    height: 3px;
    animation-timing-function: ease-out;
  }

  /* 12/15 */
  80% {
    width: 3px;
    height: 3px;
  }

  /* 13/15 */
  86.6% {
    width: 10px;
    height: 10px;
    animation-timing-function: ease-out;
  }

  /* 14/15 */
  93.3% {
    width: 10px;
    height: 10px;
    opacity: 1;
  }

  /* 15/15 */
  100% {
    width: 0px;
    height: 0px;
    opacity: 0;
    animation-timing-function: ease-out;
  }
}
